<template>
	<div>
		<div class="bfff main align-start w1450 mt20">
			<div class="left"></div>
			<div class="right flex1">
				<div class="input-box center mb20">
					<i class="el-icon-search f16 ml10"></i>
					<input type="text" placeholder="搜索参与的活动或培训名称" class="text1 ml5 flex1 c999" />
					<div class="center cfff f14 btn-blue">搜索</div>
				</div>
				<div class="right-main">
					<div class="content" v-for="v in 10">
						<div class="center">
							<div class="f14 flex1 nowrap text3">冲击地压的地质动力环境大会与防治技术专题沙龙显示一行超出隐藏</div>
							<div class="f12 text2">2023-12-21 08:30</div>
						</div>
						<div class="flex-start mb5">
							<div class="f12 text4 center cfff mr10">陕A·HJ879</div>
							<div class="f12 text3 mr10">丁婷新</div>
							<div class="f12 text5 mr10">187-8876-9987</div>
							<div class="f12 text2">接送时间：2023-10.22 18:20 根据交通状况，接送时间可能会延后，此时间仅供参考。</div>
						</div>
						<div class="main-content">
							<textEllipsis  @clickshow='handleShow'
								info='内容：通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，：显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知显示两行超出隐藏…'>
							</textEllipsis>
						</div>
					</div>

					<!-- 展开弹出层 -->
					<el-dialog :show-close="false" :visible.sync="dialogVisible" width="1000px"
						:before-close="handleClose">
						<div slot="title" class="center title">
							<div class="f30 fbold cfff flex1">冲击地压的地质动力环境大会与防治技术专题沙龙</div>
							<i class="el-icon-circle-close f30 " @click="handleClose()"></i>
						</div>
						<div class="list-content">
							<div class="content" v-for="v in 10">
								<div class="center">
									<div class="f14 flex1 nowrap text3">冲击地压的地质动力环境大会与防治技术专题沙龙显示一行超出隐藏</div>
									<div class="f12 text2">2023-12-21 08:30</div>
								</div>
								<div class="flex-start mb5">
									<div class="f12 text4 center cfff mr10">陕A·HJ879</div>
									<div class="f12 text3 mr10">丁婷新</div>
									<div class="f12 text5 mr10">187-8876-9987</div>
									<div class="f12 text2">接送时间：2023-10.22 18:20 根据交通状况，接送时间可能会延后，此时间仅供参考。</div>
								</div>
								<div class="main-content f14">
									内容：显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，：显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，：显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通知内容，显示发送通知时填写的通
								</div>
							</div>
						</div>
					</el-dialog>
				</div>
				<!-- 底部分页 -->
				<div class="center page-box mt30">
					<div class="flex1 ">

					</div>
					<el-pagination background :current-page.sync="currentPage3" :page-size="pageSize3"
						layout="prev, pager, next, sizes, jumper" :total="120" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import textEllipsis from '../../comoponents/textEllipsis.vue'
	export default {
		name: '',
		data() {
			return {
				currentPage3: 1,
				pageSize3: 10,
				dialogVisible: false
			}
		},
		created() {
			
		},
		components: {
			textEllipsis
		},
		methods: {
			handleShow(){
				this.dialogVisible = true
			},
			handleClose(){
				this.dialogVisible = false
			},
			handleSizeChange(val) {
				console.log(`${val} items per page`)
			},
			handleCurrentChange(val) {
				console.log(`current page: ${val}`)
			},
			reset() {
				this.name = ''
			}
		}
	}
</script>
<style lang='scss' scoped>
	.right {
		padding: 20px;

		.text1::placeholder {
			color: #CFDCE8;
			font-size: 14px;
			line-height: 20px;
		}

		.input-box {
			width: 400px;
			height: 30px;
			background: #EBF2F8;
			border-radius: 4px;

			.btn-blue {
				width: 80px;
				height: 30px;
				background: #007BFF;
				border-radius: 0px 4px 4px 0px;
			}

			.el-icon-search {
				color: #CFDCE8;
			}
		}

		.right-main {
			height: 658px;
			overflow-y: scroll;
			::v-deep .el-dialog__body{
				border-radius: 10px;
				margin-top: -10px;
				background: #FFFFFF;height: 460px;
				overflow-y: scroll;
				padding: 20px 36px;
			}
			.title {
				background: linear-gradient(to left, #90C6FF, #007BFF);
				padding: 20px 20px 30px 30px;
				.el-icon-circle-close{
					color: #ffffff;
				}
			}
			::v-deep .el-dialog{
				border-radius: 10px;
				overflow: hidden;
			}
			::v-deep .el-dialog__header{
				padding: 0;
			}
			.content {
				background: #F7FBFE;
				
				padding: 10px;
				margin-bottom: 12px;

				.text2 {
					color: #878CA2;
				}

				.text3 {
					color: #000000;
				}

				.flex-start {
					margin-top: 7px;

					.text4 {
						width: 74px;
						height: 20px;
						background: #007BFF;
						border-radius: 2px;
					}

					.text5 {
						color: #007BFF;
					}
				}

				.main-content {
					padding: 10px;
					background: #EBF2F8;
					border-radius: 2px;
					line-height: 20px;
				}
			}
		}
	}

	.left {
		width: 180px;
		border-right: 1px solid #EBF2F8;
		height: 910px;
	}

	.main {
		border-radius: 8px;
		border: 1px solid #EBF2F8;
	}
</style>